import React, {Component} from "react";
import {Button, Transfer, message} from "antd";
import auth from "../../common/auth";

export default class RoleUserForm extends Component {
    state = {
        mockData: [],
        targetKeys: [],
        saveLoading: false,
        data: this.props.init.data,
    }

    fetchUserRole(params = {roleId: this.state.data.roleid}) {
        auth.fetch('/sys/role/findUserByRoleId', params, (res) => {
            if (res.result == "0") {
                let targetKeys = [];
                let chosen = res.data.chosen
                for (var i in chosen) {
                    targetKeys.push(chosen[i].userid);
                }
                this.setState({
                    mockData: res.data.list,
                    targetKeys: targetKeys
                });
            } else {
                message.error(res.message, 10);
            }
        });
    }

    handleBtnSave() {
        //TODO 最后增加是否修改判断
        this.setState({saveLoading: true});
        let params = {
            roleId: this.state.data.roleid,
            userId: this.state.targetKeys.join(",")
        }
        auth.fetch('/sys/role/saveAuthUserRole', params, (result) => {
            this.setState({saveLoading: false});
            if (result.result == '0') {
                message.success(result.message);
                this.fetchUserRole();
            } else {
                message.error(result.message, 10);
            }
        });
    }

    componentDidUpdate(nextProps, nextState) {
    }

    componentDidMount() {
        this.fetchUserRole();
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.init.data.roleid != this.state.data.roleid){
            this.setState({data:nextProps.init.data});
            this.fetchUserRole({roleId:nextProps.init.data.roleid});
        }
    }
    handleChange(targetKeys) {
        this.setState({targetKeys});
    }

    renderFooter() {
        return (
            <Button type="ghost" size="small" style={{float: 'right', margin: 5}}
                    onClick={this.fetchUserRole.bind(this)}>
                刷新
            </Button>
        );
    }

    render() {
        return (
            <div>
                <Button type="primary" icon="save" loading={this.state.saveLoading} size="small" className="btn-divider"
                        onClick={this.handleBtnSave.bind(this)}>保存</Button>
                <Transfer rowKey={record => record.userid}
                          dataSource={this.state.mockData}
                          showSearch
                          listStyle={{
                              width: 250,
                              height: 300,
                          }}
                          titles={['未授权用户', '已授权用户']}
                          operations={['用户授权', '取消授权']}
                          targetKeys={this.state.targetKeys}
                          onChange={this.handleChange.bind(this)}
                          render={item => `${item.username}-${item.cname}`}
                          footer={this.renderFooter.bind(this)}
                />
            </div>

        );
    }
};
